<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item label="  ">
        <el-button icon="el-icon-edit" type="primary" @click="onlineDraw">在线绘制</el-button>
        <el-button icon="el-icon-upload" type="warning" @click="readyUpload">上传文件</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe>
      <el-table-column type="index" align="center" width="50"></el-table-column>
      <el-table-column
        label="流程名称"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="流程版本"
        prop="version"
        align="center"
      ></el-table-column>
      <el-table-column
        label="流程Key"
        prop="key"
        align="center"
      ></el-table-column>
      <el-table-column
        label="流程描述"
        prop="description"
        align="center"
      ></el-table-column>
      <el-table-column label="是否挂起" prop="suspended" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.suspended ? 'danger' : 'success'">{{
            scope.row.suspended ? "挂起" : "激活"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="基础操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="showBPMN(scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="medium"
            @click="startProcessInstance(scope.row)"
            >开启实例</el-button
          >
          <el-button type="text" size="medium" @click="deleteDefined(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="查看流程图" :visible.sync="showDiagram" width="80%">
      <div
        id="diagramContainer"
        ref="diagramContainer"
        style="width: 100%; height: 600px"
      ></div>
    </el-dialog>

    <el-dialog title="上传文件" :visible.sync="showUpload" width="560px" >
        <el-form :model="uploadModel" label-width="80px">
          <el-form-item label="流程名称">
            <el-input v-model="uploadModel.processName" placeholder="请输入流程名称" clearable style="width:200px;" ></el-input>
          </el-form-item>
          <el-form-item label="流程文件">
              <el-upload  
                    drag
                    action="#"
                    :auto-upload="false"
                    :on-change="uploadChange"
                    :multiple="false"
                    :show-file-list=false
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> 
                    <div class="el-upload__tip" slot="tip">{{uploadModel.uploadFileName}}</div>
              </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showUpload = false">取 消</el-button>
          <el-button type="primary" @click="upload2Server">确 定</el-button>
        </span>
    </el-dialog>
 
 </div>
</template>

<script>
import BpmnJS from "bpmn-js/dist/bpmn-navigated-viewer.production.min.js";
export default {
  data() {
    return { 
      tableData: [],
      showDiagram: false,
      bpmnViewer: null,
      showUpload:false,
      uploadModel:{
          processName:null,
          processFile:null,
          uploadFileName:null
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.getProcessDefinitionList().then((res) => {
        if (res.status == 0) {
          this.tableData = res.data;
        }
      });
    },
    deleteDefined(defined) {
      this.$confirm("此操作将永久删除该流程定义, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.deleteDefined(defined.deploymentId).then((res) => {
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {});
    },
    onlineDraw() {
      //第一步定义routeUrl
      let routeUrl = this.$router.resolve({
        path: "/bpmn",
      });
      // 第二步：新标签页打开
      window.open(routeUrl.href, "_blank");
      //直接跳转
      // this.$router.push('/bpmn');
    },
    readyUpload(){
      this.uploadModel.processName = null
      this.uploadModel.processFile = null
      this.uploadModel.uploadFileName = null
        this.showUpload = true
    },
    uploadChange(file, fileList){  
        this.uploadModel.processFile = file.raw
        this.uploadModel.uploadFileName = file.name
        if (!this.uploadModel.processName) {
            this.uploadModel.processName = file.name
        }
    },
    upload2Server(){
      if (!this.uploadModel.processName || !this.uploadModel.processFile) {
         this.$message.error("请填写流程名称以及上传文件");
         return
      }
      this.$api.uploadFileAndDeployment(this.uploadModel.processName,this.uploadModel.processFile).then(res=>{
        if (res.status == 0) {
          this.$message.success("文件上传成功");
          this.getList()
          this.showUpload = false
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    showBPMN(deploydefined) {
      if (this.bpmnViewer) {
        this.bpmnViewer.destroy();
        this.bpmnViewer = null;
      }
      this.showDiagram = true;
      this.$api
        .getBPMNXML(deploydefined.deploymentId, deploydefined.resourceName)
        .then((res) => {
          if (res) {
            this.toShowDiagram(res);
          }
        });
    },
    toShowDiagram(bpmn) {
      var container = this.$refs.diagramContainer;
      this.bpmnViewer = new BpmnJS({
        container: container,
      });
      this.bpmnViewer.importXML(bpmn);
      this.bpmnViewer.get("canvas").zoom("fit-viewport");
    },
    startProcessInstance(processDefined) {
      let key = processDefined.key;
      this.$prompt("请输入流程示例名称", "准备部署", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "正在部署中...",
          });
          let instanceName = value;
          this.$api.startProcessInstance(key, instanceName).then((res) => {
            console.log(res);
          });
        })
        .catch(() => {});
    },
  },
};
</script>
